<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ website_top_title }}</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: {{ header_color }};
            color: white;
            padding: 1em 0;
            text-align: center;
            position: relative;
        }
        .open-btn {
            position: absolute;
            top: 1em;
            left: 1em;
            background: none;
            border: none;
            color: {{ button_color }};
            cursor: pointer;
            font-size: 1.5em;
            display: none;
        }
        .open-btn.show {
            display: block;
        }
        .sidebar {
            width: 25%;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            background-color: {{ side_bar_color }};
            padding: 20px;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }
        .sidebar.hidden {
            transform: translateX(-100%);
        }
        .main-content {
            margin-left: 25%;
            padding: 20px;
            transition: margin-left 0.3s ease;
        }
        .main-content.hidden {
            margin-left: 0;
        }
        .sidebar h2 {
            margin-top: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .sidebar ul {
            list-style-type: none;
            padding: 0;
        }
        .sidebar ul li {
            margin: 10px 0;
        }
        .sidebar ul li a {
            text-decoration: none;
            color: {{ text_color }};
        }
        .sidebar ul li a:hover {
            color: {{ side_bar_button_hover_color }};
        }
        .close-btn {
            background: none;
            border: none;
            color: {{ close_button_color }};
            cursor: pointer;
            font-size: 1.5em;
        }
        .close-btn:hover {
            color: {{ close_button_hover_color }};
        }
        .articles-list {
            margin-top: 20px;
        }
        .articles-list h2 {
            margin-bottom: 10px;
        }
        .articles-list ul {
            list-style-type: none;
            padding: 0;
        }
        .articles-list ul li {
            margin: 5px 0;
        }
        .articles-list ul li a {
            text-decoration: none;
            color: {{ text_color }};
        }
        .articles-list ul li a:hover {
            color: {{ side_bar_button_hover_color }};
        }
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        .pagination button {
            background-color: {{ side_bar_color }};
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            margin: 0 5px;
        }
        .pagination button:hover {
            background-color: {{ side_bar_button_hover_color }};
        }
        .pagination button.active {
            background-color: {{ side_bar_button_hover_color }};
        }
    </style>
</head>
<body>
    <header>
        <h1>{{ title }}</h1>
        <button class="open-btn" onclick="toggleSidebar()" id="openBtn">&equiv;</button>
    </header>
    {{ enabled_sidebar }}
    <div class="main-content">
        <!-- 主内容区域 -->
        <h2>{{ news }}</h2>
        <div class="articles-list" id="articlesList">
            <ul id="articlesListUl">
                {{ articles_list }}
            </ul>
        </div>
        <div class="pagination" id="pagination">
            <!-- 页码按钮将通过 JavaScript 动态插入 -->
        </div>
    </div>

    <script>
        const articlesPerPage = 10000000;
        let currentPage = 1;

        function renderArticles(page) {
            const articlesListUl = document.getElementById('articlesListUl');
            const articles = Array.from(articlesListUl.children);
            const totalPages = Math.ceil(articles.length / articlesPerPage);

            articles.forEach((article, index) => {
                if (index >= (page - 1) * articlesPerPage && index < page * articlesPerPage) {
                    article.style.display = 'block';
                } else {
                    article.style.display = 'none';
                }
            });

            renderPagination(totalPages);
        }

        function renderPagination(totalPages) {
            const pagination = document.getElementById('pagination');
            pagination.innerHTML = '';

            for (let i = 1; i <= totalPages; i++) {
                const button = document.createElement('button');
                button.textContent = i;
                button.onclick = () => {
                    currentPage = i;
                    renderArticles(currentPage);
                };
                if (i === currentPage) {
                    button.classList.add('active');
                }
                pagination.appendChild(button);
            }
        }

        function toggleSidebar() {
            const sidebar = document.querySelector('.sidebar');
            const mainContent = document.querySelector('.main-content');
            const openBtn = document.getElementById('openBtn');

            if (sidebar.classList.contains('hidden')) {
                sidebar.classList.remove('hidden');
                mainContent.classList.remove('hidden');
                openBtn.classList.remove('show');
            } else {
                sidebar.classList.add('hidden');
                mainContent.classList.add('hidden');
                openBtn.classList.add('show');
            }
        }

        function init() {
            renderArticles(currentPage);
        }

        init();
    </script>
</body>
</html>
